<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui"
	xmlns:cc="http://java.sun.com/jsf/composite/cc">

<ui:composition template="/WEB-INF/templates/maintemplate.xhtml">

	<!-- define the title for each page -->
	<ui:define name="title">#{threadBackingBean.selectedForumThread.subject}
	<f:event type="preRenderComponent" listener="#{threadBackingBean.loadThread}" />
	</ui:define>

	<ui:define name="js">
		<h:outputScript library="js" name="profile.js" target="head"></h:outputScript>
	</ui:define>
	<ui:define name="metadata">
		<f:metadata>
			<f:viewParam name="id" value="${sessionScope.threadId}"></f:viewParam>
		</f:metadata>

	</ui:define>
	<ui:define name="navigation">
		<h:panelGroup id="navigationPanelId">
			<ui:include src="/navigation.xhtml"></ui:include>

		</h:panelGroup>
	</ui:define>
	<ui:define name="content">
		<ui:include src="../WEB-INF/templates/faceBookPlugin.xhtml"></ui:include>
		<div class="solidBorder viewThread">

			<!-- Thread Form -->
			<div>
				<h:form id="threadform" prependId="false">
					<table class="viewThreadTable">
						<tr>
							<td width="20%" class="outLineBorder readFloor_Left">
								<div class="readNum">
									<ul class="cc">
										<li><em>#{threadBackingBean.selectedForumThread.numberOfView}</em> #{msgs.Viewed}</li>
										<li><em id="topicRepliesNum">#{threadBackingBean.selectedForumThread.numberOfReplies}</em> #{msgs.Replies}</li>
									</ul>
								</div>
							</td>
							<td class="readTop">
								<h1>
									<h:outputText value="#{threadBackingBean.selectedForumThread.subject}"></h:outputText>
								</h1>
							</td>
						</tr>
						<tr>
							<td width="20%" class="readFloor_Left">
								<div>
									<div style="margin-right: 5px;">

										<div>
											<h:graphicImage name="#{threadBackingBean.selectedForumThread.owner.profilePicName}" library="profilepic" />

											<p:commandLink value="#{threadBackingBean.selectedForumThread.owner.userId}"
												actionListener="#{userBackingBean.populateUser(threadBackingBean.selectedForumThread.owner.userId)}" process="@this"
												update=":viewProfileForm" oncomplete="viewProfileWidget.show()" />
											<div>#{threadBackingBean.selectedForumThread.owner.title}</div>
										</div>

										<div>
											<label>#{msgs.Member_Since}</label>
											<h:outputFormat value="#{threadBackingBean.selectedForumThread.owner.createTime}">
												<f:convertDateTime pattern="yyyy-MM-dd" />
											</h:outputFormat>
										</div>
										<div>
											<ui:remove>
												<h:link value="#{msgs.Send_Message}" onclick="messageDlg.show();return false;" rendered="#{!empty sessionScope.CURRENTUSER}" />
											</ui:remove>
											<p:commandLink value="#{msgs.Send_Message}" rendered="#{!empty sessionScope.CURRENTUSER}"
												actionListener="#{messageBackingBean.setMessageRecipent(threadBackingBean.selectedForumThread.owner.userId)}"
												oncomplete="messageDlg.show();return false;" process="@this" update=":messageComposeFormId"></p:commandLink>
										</div>

									</div>
								</div>
							</td>
							<td class="readFloor_Main">
								<div class="readFloor_Main_Top">

									<div class="readFloor_Main_Top_Misc">
										#{msgs.Post_Label}
										<h:outputFormat value="#{threadBackingBean.selectedForumThread.createTime}">
											<f:convertDateTime pattern="yyyy-MM-dd HH:mm a" />
										</h:outputFormat>
									</div>
									<div class="facebookshare">
										<a id="share_button" href="#"> <img src="/resources/images/facebook.png" alt="facebook" height="25px" />
										</a>
									</div>
									<div class="readFloor_Main_Top_Rating">
										<h:outputText id="scoreId" value="#{threadBackingBean.getVote(threadBackingBean.selectedForumThread.id)} #{msgs.Like} " />
										<p:commandButton value="+Like" actionListener="${threadBackingBean.handleVotes(1)}" process="@this" update="scoreId"></p:commandButton>

									</div>

								</div>
								<div class="readFloor_Main_Content">

									<h:panelGrid columns="1" id="readFloor_Main_Content_Table">
										<h:panelGroup>
											<p:inputText id="threadSubject" value="#{threadBackingBean.selectedForumThread.subject}" label="#{msgs.promptThreadSubject}"
												rendered="${threadBackingBean.editMode}">
											</p:inputText>
											<p:message id="ThreadSubjectMess" for="threadSubject" rendered="${threadBackingBean.editMode}"></p:message>
										</h:panelGroup>

										<h:panelGroup>
											<h:outputText id="contentDetail" value="#{threadBackingBean.selectedForumThread.content}" rendered="#{!threadBackingBean.editMode}"
												escape="false" styleClass="zhengwen"></h:outputText>
											<ui:remove>
												<p:editor id="threadcontentid" value="#{threadBackingBean.selectedForumThread.content}" rendered="#{threadBackingBean.editMode}"></p:editor>
											</ui:remove>
											<cc:xheditor value="#{threadBackingBean.selectedForumThread.content}" style="width:650px;height:300px;" id="threadcontentid"
												rendered="#{threadBackingBean.editMode}"></cc:xheditor>

											<p:message for="threadcontentid"></p:message>
										</h:panelGroup>

										<h:inputHidden value="#{threadBackingBean.selectedForumThread.id}" />


										<h:panelGroup>
											<p:commandButton value="#{constants.nameToValueMap.Action_UPDATE}" id="updatecommand" action="#{threadBackingBean.updateThread}"
												process="@form" update="@form" rendered="#{threadBackingBean.editMode}">
											</p:commandButton>
											<p:commandButton value="
															Cancel" action="#{threadBackingBean.enableEditMode(false)}"
												rendered="#{threadBackingBean.editMode}" process="@form" update="@form">
											</p:commandButton>
										</h:panelGroup>
									</h:panelGrid>

									<br />
								</div>
								<div class="readFloor_Main_Content_Action">

									<p:outputPanel autoUpdate="true">
										<p:commandButton value="#{msgs.EDIT}" update="@form" process="@this" id="editbutton"
											actionListener="#{threadBackingBean.enableEditMode(true)}" oncomplete="initTextAreaWithEditor();"
											rendered="#{!threadBackingBean.editMode &amp;&amp; (login.userInSysadmin ||  login.isUserCategory_Owner(threadBackingBean.belongingCategory)|| login.getCurrentUser().equals(threadBackingBean.selectedForumThread.owner))}">
											<f:viewParam name="id" value="#{threadBackingBean.selectedForumThread.id}"></f:viewParam>
										</p:commandButton>

										<p:commandButton value="#{msgs.Sticky_This_Thread}" id="stickbutton" process="@this" actionListener="#{threadBackingBean.stickThread}"
											disabled='#{!login.userLoggedIn ||  login.IsUserStickThread(threadBackingBean.selectedForumThread)}'>
											<f:viewParam name="id" value="#{threadBackingBean.selectedForumThread.id}"></f:viewParam>
										</p:commandButton>

										<p:commandButton value="#{msgs.UNSticky_This_Thread}" id="unstickbutton" process="@this" actionListener="#{threadBackingBean.unStickThread}"
											disabled='#{!login.userLoggedIn || !login.IsUserStickThread(threadBackingBean.selectedForumThread)}'>
											<f:viewParam name="id" value="#{threadBackingBean.selectedForumThread.id}"></f:viewParam>
										</p:commandButton>
										<p:commandButton value="#{msgs.lockButton}" update="@form" id="logckbutton" process="@this"
											actionListener="#{threadBackingBean.lockThread(true)}" disabled="#{threadBackingBean.selectedForumThread.locked}"
											rendered='#{login.userInSysadmin || threadBackingBean.ownerForCurrCategory}'>
											<f:viewParam name="id" value="#{threadBackingBean.selectedForumThread.id}"></f:viewParam>
										</p:commandButton>
										<p:commandButton value="#{msgs.unLockButton}" update="@form" id="unlockbutton" process="@this"
											disabled="#{!threadBackingBean.selectedForumThread.locked}" actionListener="#{threadBackingBean.lockThread(false)}"
											rendered='#{login.userInSysadmin ||threadBackingBean.ownerForCurrCategory}}'>
											<f:viewParam name="id" value="#{threadBackingBean.selectedForumThread.id}"></f:viewParam>
										</p:commandButton>

									</p:outputPanel>
								</div>
							</td>
						</tr>
					</table>
				</h:form>
			</div>
			<ui:include src="/ad/leaderboard.xhtml"></ui:include>

			<!-- Reply Form -->
			<div>

				<h:form id="replyform" prependId="false">
					<f:event type="preRenderComponent" listener="#{replyBackingBean.loadReplies}" />
					<p:dataTable id="replydatatable" value="#{replyBackingBean.lazyReplyDataModel}" var="reply" paginator="true" rows="10" lazy="true"
						paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}  {PageLinks}  {CurrentPageReport} {NextPageLink} {LastPageLink}"
						rowsPerPageTemplate="5,10,15" paginatorPosition="bottom" tableStyleClass="viewThreadTable" emptyMessage="">
						<p:column styleClass="readFloor_Left">
							<div>
								<div class="" style="margin-right: 5px;">
									<h:graphicImage name="#{reply.owner.profilePicName}" library="profilepic" />
									<div>
										<p:commandLink value="#{reply.owner.userId}" actionListener="#{userBackingBean.populateUser(reply.owner.userId)}" process="@this"
											update=":viewProfileForm" oncomplete="viewProfileWidget.show()" />
										<div>#{reply.owner.title}</div>
									</div>

									<div class="user_rankbar">
										<img src="http://st.slickdealz.net/images/ranks/rank0.png" alt="" border="0" />
									</div>


									<div>
										<label>#{msgs.Member_Since}</label>
										<h:outputFormat value="#{reply.owner.createTime}">
											<f:convertDateTime pattern="yyyy-MM-dd" />
										</h:outputFormat>
									</div>
									<div>
										<label>#{msgs.Post}</label>
										<h:outputText value="#{reply.owner.numOfPosts}" />
									</div>
									<div>
										<ui:remove>
											<h:link value="#{msgs.Send_Message}" onclick="messageDlg.show();return false;" />
										</ui:remove>
										<p:commandLink value="#{msgs.Send_Message}" rendered="#{!empty sessionScope.CURRENTUSER}"
											actionListener="#{messageBackingBean.setMessageRecipent(reply.owner.userId)}" oncomplete="messageDlg.show();return false;" process="@this"
											update=":messageComposeFormId"></p:commandLink>
									</div>
								</div>
							</div>
						</p:column>
						<p:column styleClass="readFloor_Main">
							<div class="readFloor_main">
								<div class="readFloor_Main_Top_Misc">
									#{msgs.Post_Label}
									<h:outputFormat value="#{reply.createTime}">
										<f:convertDateTime pattern="yyyy-MM-dd HH:mm a" />
									</h:outputFormat>
								</div>
								<div class="readFloor_Main_Content">
									<table id="readFloor_Main_Content_Reply_Table">
										<tr>
											<td><h:panelGroup>
													<p:inputText id='replySubject' value="#{replyBackingBean.editReply.subject}" label="#{msgs.promptThreadSubject}"
														rendered="${reply.equals(replyBackingBean.editReply)}">
													</p:inputText>
													<p:message id="replySubjectMess" for="replySubject" rendered="${reply.equals(replyBackingBean.editReply)}"></p:message>
												</h:panelGroup> <h:panelGroup>
													<h:outputText value="#{reply.content}" escape="false" rendered="${!reply.equals(replyBackingBean.editReply)}"></h:outputText>
													<ui:remove>
														<p:editor id="replycontentid" value="#{replyBackingBean.editReply.content}" rendered="#{reply.equals(replyBackingBean.editReply)}"></p:editor>
													</ui:remove>
													<cc:xheditor id="replycontentid" value="#{replyBackingBean.editReply.content}" rendered="#{reply.equals(replyBackingBean.editReply)}"
														style="width:650px;height:300px;"></cc:xheditor>
												</h:panelGroup> <h:panelGroup>
													<br />
													<p:outputPanel autoUpdate="true" rendered="#{reply.equals(replyBackingBean.editReply)}">
														<p:commandButton value="#{msgs.UPDATE}" id="updateButton" action="#{replyBackingBean.updateReply()}" process="@form" update="@form">
														</p:commandButton>

														<p:commandButton value="#{msgs.CANCEL}" id="cancelButton" action="#{replyBackingBean.cancelUpdate()}" process="@this" update="@form"
															immediate="true">
														</p:commandButton>
													</p:outputPanel>
												</h:panelGroup></td>
										</tr>
									</table>

								</div>
								<div class="readFloor_Main_Content_Action">

									<p:commandButton value="#{msgs.replylink}" id="replyButton" actionListener="#{replyBackingBean.replyTo(reply)}" process="@this"
										update=":createReplyForm" oncomplete="initTextAreaWithEditor();jumpTo('#createReplyDiv')">
									</p:commandButton>

									<p:commandButton value="#{msgs.EDIT}" process="@this" update="@form" id="editButton" actionListener="#{replyBackingBean.setEditMode(reply)}"
										oncomplete="initTextAreaWithEditor();"
										rendered="#{(!reply.equals(replyBackingBean.editReply)  &amp;&amp; (login.userInSysadmin || login.isUserCategory_Owner(threadBackingBean.belongingCategory)|| login.getCurrentUser().equals(reply.owner)))}">

									</p:commandButton>

									<p:commandButton value="#{msgs.deleteButton}" id="deleteButton" process="@this" update="@form"
										actionListener="#{replyBackingBean.deleteReply(reply)}"
										rendered="#{login.userInSysadmin ||login.isUserCategory_Owner(threadBackingBean.belongingCategory) }">
									</p:commandButton>
								</div>
							</div>
							<div class="bg-divider"></div>
						</p:column>
					</p:dataTable>
				</h:form>

				<!-- createreply.xhtml should be included in a form -->
				<ui:include src="/reply/createreply.xhtml"></ui:include>

				<h:form prependId="false" id="messageComposeFormId">
					<!-- send a message -->
					<ui:include src="/message/composeMessage.xhtml"></ui:include>
				</h:form>

				<ui:include src="/user/viewprofile.xhtml"></ui:include>
			</div>
		</div>
	</ui:define>
</ui:composition>
</html>